<template>
<view class="page">
	<template v-if="loadingState.default">
		<loading :loadingState="loadingState"></loading>
	</template>
	<template v-else>
		<view class="body"> 		
			<view class="content-area">
				<view class="title">{{detail.title}}</view>
				<view class="label-bar">
					<text>{{detail.pubdate}}</text>
					<text>{{detail.source}}</text>
				</view>
				<view class="ps-area">
					{{detail.description}}......
				</view>
				<view class="content">
					<rich-text :nodes="htmlContent"></rich-text>
				</view>
				<view class="handle-btn">
					<view class="zan-area" @click="zan">
						<i v-if="zanStatus==2" class="iconfont icon-zantong">&#xe794;</i>
						<i v-else class="iconfont icon-zantongfill f-red">&#xe793;</i>
						<text>{{detail.zannum}}</text>
					</view>
				</view>	 
			</view>			
			
			<view class="mod-grid">
				<view class="hd">
					<view class="title f-wb">其他文章阅读</view>
					<navigator open-type="switchTab" url="/pages/article/article" hover-class="none" class="more-btn">全部文章></navigator>
				</view>
				<view class="con">
					<template v-if="list.length>0">
						<view class="article-wrap">					
							<view class="item" v-for="(item,index) in list" :key="index" 
							:data-id="item.id" 
							:data-typeid="item.typeid" 
							:data-url="item.outlink"
							:data-title="item.title" @click="jump">
								<view v-if="item.litpic" class="pic">
									<image :src="web_host+item.litpic" mode="widthFix" class="article-img"></image> 
								</view>
								<view class="info">
									<view class="title split-line">{{item.title}}</view>
									<view class="label-bar">
										<view class="day-time">
											<view class="iconfont f-s30">&#xe614;</view>
											<text class="text">{{item.pubdate}}</text> 
										</view>
										<view class="label">
											<view class="click-data">
												<view class="iconfont">&#xe639;</view>
												<text class="text">{{item.click}}</text> 
											</view>
											
										</view>
									</view> 
								</view>
							</view> 
						</view> 
					</template>
					<template v-else>
						<empty msg="暂无信息" icon="@/static/images/empty2.png"></empty> 
					</template>		
				</view>
			</view> 
			
			 
			<view class="comment m-b2" id="J-comment">
				<view class="hd">
					<view class="title">评论</view>
					<view class="comment-num">共{{comment.total}}条评论 ></view>
				</view> 
				<template v-if="comment.list.length>0"> 
					<view class="comment-list m-b2"> 				
						<view class="item" v-for="(item,index) in comment.list" :key="index">
							<image class="avator-img" src="@/static/images/man.png" mode="widthFix"></image>
							<view class="info">
								<view class="user-bar">
									<view class="user-name">{{item.mid_nickname}}</view>
									<view class="day-time">{{item.addtime}}</view> 
								</view> 		 
								<view v-if="item.rmid>0" class="content split-line prev-msg">
									<view class="label">回复<text class="f-red"> {{item.rmid_nickname}}</text>：</view>
									<view class="">{{item.pinfo.content}}</view>
								</view>
								<view class="content split-line"> 
									<view>{{item.content}}</view>
								</view>
								<view v-if="item.mid>0&&item.mid!=userInfo.id" class="hf-btn" @click="hfComment(item.id,item.tid,item.mid,item.rmid)">回复</view> 
							</view>
						</view>					
					</view> 
					<loading :loadingState="commentLoading"></loading>
				</template> 
				<template v-else>
					<view class="empty-comment">暂无评论</view>
				</template>
			</view>
			
			<view v-if="isShowCommentForm" class="comment-form">
				<textarea v-model="comment_msg" maxlength="-1" focus="true"  confirm-type="done" cursor-spacing="10" @blur="commentMsgBlur" placeholder="请输入您的评论"></textarea>
				<view class="btn" @touchend.prevent="sendComment">发送</view>
			</view>					
			
			<view v-else class="footer">
				<view class="fix-wrap detail-footer">
					<view class="write-btn" @click="ShowCommentForm">
						<view class="iconfont f-s42 m-r2">&#xe8cc;</view>
						<view class="f-s28">我要评论...</view>
					</view>
					<view class="btn iconfont icon-31pinglun f-s52 comment-btn" @click="getFixTop">&#xe602;
						<view v-if="comment.total>0" class="num">{{comment.total>100?'99+':comment.total}}</view>	
					</view>
					<view class="btn zan-btn" @click="zan">
						<view v-if="zanStatus==2" class="iconfont f-s46 icon-zantong">&#xe794;</view>
						<view v-else class="iconfont f-s46 f-red icon-zantongfill">&#xe793;</view> 
					</view>
					<view class="btn iconfont f-s48" @click="showPopup('show','isShowShare')">&#xe6a7;</view>
				</view>
			</view> 
			
			<view v-if="flag.isFullPage" class="full-fix-page" @click="showPopup('hide')">
				<view v-if="flag.isShowShare" class="share-area a-fadeinB">
					<view class="share-btn-list">
						<view class="item" @click="share(1)">
							<view class="icon">
								<image src="@/static/images/wechat_icon.png" mode="widthFix"></image>
							</view>						
							<text>微信好友</text>
						</view>	
						<view class="item" @click="share(2)">
							<view class="icon">
								<image src="@/static/images/wechat_pyq.png" mode="widthFix"></image>
							</view>	
							<text>朋友圈</text>
						</view>
					</view>
					<view class="cancle-btn" @click="showPopup('hide')">取消</view>
				</view>
			</view>
		</view> 
	</template>
</view>
</template>

<script>
import { htmlParse } from '@/common/util.js'
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue' 

export default{
	name:'list',
	data(){
		return {
			isIphoneX:false,
			id:'', 
			type:'',
			detail:{}, 
			htmlContent:[],
			label:[],
			list:[],
			loadingState:{
				default:true
			},
			listLoading:{
				default:true, 
			}, 
			commentLoading:{ 
				loading:true, 
				completed:false
			}, 
			userInfo:uni.getStorageSync('userInfo'),
			isLogin:false,
			comment_msg:'', 
			pid:0,
			tid:0,
			rmid:0,
			page:1,
			zanStatus:2,
			comment:{
				list:[],
				total:0
			}, 
			flag:{
				isFullPage:false,
				isShowShare:false
			},
			isShowCommentForm:false,
			web_host:getApp().globalData.web_host_2
		}
	},
	async onLoad(params) {  
		this.id=params.id;
		this.type=params.type;
		this.isLogin = await this.$loginState(); 
		this.detail=await this.getDetail(); 
		this.getCommentList();  
	},
	mounted() {
		if(this.type){ 
			setTimeout(()=>{
				this.getFixTop();	
			},500)
			
		}
	},
	onReachBottom(){
		if(this.commentLoading.completed){
			this.page=1;
			return false
		}else{
			if(this.comment.list.length<this.comment.total&&this.comment.list.length>0){
				this.page++; 
				this.getCommentList();
			} 
		}	 
	},
	methods:{
		getDetail:async function(){
			let res=await this.$api.news_api.news({
				act:'artinfo',
				id:this.id
			})   
			if(res.data.rcode==1){				
				this.loadingState.default=false;	
				this.htmlContent=htmlParse(res.data.data.info.body);
				this.getlist(); 
				if(this.userInfo.id){
					this.getZanStatus();
				}				
				res.data.data.info.zannum=parseInt(res.data.data.info.zannum);
				return res.data.data.info;				 
			}else{
				this.loadingState.default=false;
			}
		},
		  
		getlist:async function(){
		  	let res=await this.$api.news_api.news({
		  		act:'artlistnum',
		  		curid:this.detail.curid,
		  		typeid:this.detail.typeid, 
		  		limit:5
		  	})    
		  	if(res.data.rcode==1){				
		  		this.list=res.data.data.list;		  		 
		  	} 
		},
		
		jump:function(e){
			let id=e.currentTarget.dataset.id;
			let typeid=e.currentTarget.dataset.typeid;
			let url=e.currentTarget.dataset.url; 
			if(typeid==93){
				// 公众号文章
				uni.navigateTo({
					url:`/pages/webview/webview?page_type=article&url=${url}`
				})
			}else{
				uni.navigateTo({
					url:`/package_article/detail/detail?id=${id}`
				})
			}
		},
		
		// 打开评论窗口
		ShowCommentForm:function(){
			this.isShowCommentForm=true;
			this.pid=0;
			this.rmid=0;
		},
		
		// 获取评论内容
		commentMsgBlur:function(e){ 
			this.comment_msg=e.detail.value;
			this.isShowCommentForm=false;
		},
		 
		// 发送评论
		sendComment:async function(){  
			let _this=this;
			if(this.comment_msg==''){
				uni.showToast({
					icon:'none',
					title:'请输入评论内容',
					mask:true
				})
				return 
			}
			if(!this.isLogin){
				
				uni.showToast({
					icon:'none',
					title:'请先登录',
					mask:true,
					success() {
						uni.navigateTo({
							url:'/pages/login/login?backType=prev'
						})
					}
				})
			}else{
				let res=await this.$api.news_api.news({
					act:'review',
					aid:this.id,
					mid:this.userInfo.id,
					rmid:this.rmid,
					pid:this.pid,
					tid:this.tid,
					content:this.comment_msg, 
				}) 
				if(res.data.rcode==1){
					uni.showToast({
						icon:"success",
						title:res.data.rmsg,
						mask:true,
						async success() {
							_this.isShowCommentForm=false;
							_this.comment_msg=''; 
							_this.comment.list=[];
							_this.comment.total=0;
							_this.page=1;
							_this.commentLoading={
								loading:true,
								completed:false
							}
							_this.getCommentList(); 
						}
					})
				}else{
					uni.showToast({
						icon:"none",
						title:res.data.rmsg,
						mask:true,
						async success() {
							_this.isShowCommentForm=false;
							_this.comment_msg='';  
						}
					})
				}
			}
		},
		
		// 获取评论列表
		getCommentList:async function(){
			let res=await this.$api.news_api.news({
				act:'reviewlist',
				aid:this.id,
				page:this.page
			}) 
			if(res.data.rcode==1){ 
				this.comment.list=this.comment.list.concat(res.data.rdata.list);
				this.comment.total=res.data.rdata.count;
				if(this.comment.list.length==res.data.rdata.count){
					this.commentLoading.loading=false;
					this.commentLoading.completed=true;
				} 
			} 
		},
		
		// 回复评论
		hfComment:function(id,tid,mid,rmid){
			this.pid=id;
			this.tid=tid;
			this.rmid=mid; 
			this.isShowCommentForm=true; 
		},
		
		// 获取固定点位置
		getFixTop:function(){
			let _this = this;
			let query = uni.createSelectorQuery().in(this);  
			uni.createSelectorQuery().select(".page").boundingClientRect(data=>{//目标节点、也可以是最外层的父级节点
			　　uni.createSelectorQuery().select("#J-comment").boundingClientRect((res)=>{//最外层盒子节点
			　　　　uni.pageScrollTo({
			　　　　　　duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
			　　　　　　scrollTop:res.top - data.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
			　　　　})
			　　}).exec()
			}).exec(); 
		},
		
		// 点赞
		zan:async function(){
			let _this=this;
			if(!this.userInfo.id){
				this.$loginState('reset');	
			}else{
				if(this.zanStatus==2){
					// 点赞
					let res=await this.$api.news_api.news({
						act:'zan',
						aid:this.id,
						mid:this.userInfo.id 
					}) 
					if(res.data.rcode==1){
						uni.showToast({
							icon:"none",
							image:'../../static/images/zan.png',
							title:res.data.rmsg,
							mask:true,
							async success() {
								_this.zanStatus=1;
								_this.detail.zannum+=1;
							}
						})
					}
				}else{
					// 取消赞
					let res=await this.$api.news_api.news({
						act:'cannel_zan',
						aid:this.id,
						mid:this.userInfo.id 
					}) 
					if(res.data.rcode==1){
						uni.showToast({
							icon:"none",
							image:'../../static/images/qx_zan_icon.png',
							title:res.data.rmsg,
							mask:true,
							async success() {
								_this.zanStatus=2;	
								_this.detail.zannum-=1;
							}
						})
					}
				}
				
			}
		},
		
		// 点赞状态
		getZanStatus:async function(){
			let res=await this.$api.news_api.news({
				act:'iszan',
				aid:this.id,
				mid:this.userInfo.id 
			}) 
			if(res.data.rcode==1){
				this.zanStatus=1
			} 
		},
		
		showPopup: function(t, n) {
			if (t == 'show') {
				this.flag.isFullPage = true;
				this.flag[n] = true;
			} else if (t == 'hide') {
				for (let i in this.flag) {
					this.flag[i] = false;
				}
			}
		},
		
		share:function(type){
			// type 1 微信好友  2 朋友圈
			let data={};
			if(type==1){
				data.provider='weixin';
				data.type=0;
				data.title=this.detail.title;
				data.href="http://www.honghuoyi.com/plus/m_ainfo.php?type=share&aid="+this.id; 
				data.imageUrl='../../static/images/58x58.png';  //../../static/images/58x58.png
				data.scene='WXSceneSession';    // WXSceneTimeline  朋友圈    WXSceneSession 聊天界面
				data.summary=this.detail.description;
			}else if(type==2){
				data.provider='weixin';
				data.type=0;
				data.title=this.detail.title;
				data.href="http://www.honghuoyi.com/plus/m_ainfo.php?type=share&aid="+this.id;
				data.imageUrl='../../static/images/58x58.png';
				data.scene='WXSceneTimeline';    // WXSceneTimeline  朋友圈    WXSceneSession 聊天界面
				data.summary=this.detail.description;
			} 
			
			uni.share({
				provider:data.provider,
				type:data.type,
				title:data.title,
				href:data.href,
				imageUrl:data.imageUrl,
				scene:data.scene,    // WXSceneTimeline  朋友圈    WXSceneSession 聊天界面
				summary:data.summary,
				success:function(res){ 
				},
				fail(err) { 
					if(err.code==-8){
						// 未安装应用
						uni.showModal({
							content:'未检测到客户端，请先下载安装客户端',
							mask:true,
							confirmText:'我知道了', 
							showCancel:false,
							success(m_res) {
								 
							}
						}) 
					}
				}
			})
		}
		 
	},
	components:{  
		loading,
		empty 
	},
	computed:{
		loginStateUpdate(){ 
			return this.$store.state.loginStatus
		}
	},
	watch:{
		async loginStateUpdate(newer,older){ 
			if(newer){
				this.isLogin = true;
				this.detail=await this.getDetail();
				this.getCommentList(); 
			}
		}
	}
}
</script>

<style lang="less" scoped>
.mod-grid{
	background: #fff;
	margin-bottom: 20rpx;
	.hd{
		display: flex;
		justify-content: space-between;
		line-height: 70rpx;
		padding:0 20rpx;
		border-bottom:1rpx solid #ddd;
		.title{
			font-size:32rpx;
		}
		.more-btn{
			font-size: 28rpx;
			color:#09f;
		}
	}
} 
.content-area{
	background: #fff;
	padding:20rpx;
	margin-bottom: 20rpx;
	.title{
		margin-bottom:30rpx;
		font-size:42rpx;
		font-weight: bold;
	}
	.label-bar{
		margin-bottom: 40rpx;;
		font-size:26rpx;
		color:#999;
		text{
			margin-right: 20rpx;
		}
	}
	.ps-area{
		margin-bottom:30rpx;
		background: #f8f8f8;
		border-radius: 18rpx;
		padding:20rpx;
		color:#666;
		font-size:28rpx;
	}
	.content{
		margin-bottom:40rpx;
		overflow: hidden;
	}
	.label{
		display: flex;
		margin:30rpx 0;
		color:#999;
		font-size:28rpx;
		flex-wrap: wrap;
		navigator{
			margin-right: 30rpx;
			color:#09f;
		}
	}
	.handle-btn{
		display: flex;
		justify-content: center;
		margin:40rpx 0 20rpx;
		.zan-area{
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 120rpx;
			border:2rpx solid #eee;  
			border-radius: 36rpx;
			padding:10rpx 20rpx;
			margin:0 20rpx;
			font-size:28rpx;
			color:#999;
			i{
				margin-right: 5px;
			}
		}
		.active{
			background:#F0AD4E;
			border:2rpx solid #F0AD4E;
			color:#fff;
		}
	}
}
.content { 
	::v-deep .html_p{
		line-height: 54rpx;
		text-align: left!important;
		margin-bottom: 20rpx;
		text-indent: 2em;
		font-size: 32rpx; 
	}
	::v-deep .html_img{
		width: 100%!important;
		height: auto!important;
		margin:20rpx 0 20rpx -2em;
		
	}
}

.article-wrap{
	margin-bottom: 20rpx;
	background: #fff;
}
.article-wrap .item{
	padding:20rpx;
	border-bottom:1rpx solid #eee;
	display: flex; 
}
.article-wrap .item .pic{
	width:30%;
	margin-right:20rpx;
	max-height: 150rpx;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.article-wrap .item .pic image{
	width:100%;
}
.article-wrap .item .info{
	width:65%;
	flex-grow: 2; 
}
.article-wrap .item .info .title{
	margin-bottom:20rpx;
	font-size:30rpx;
}
.article-wrap .item .info .label-bar{
	display: flex; 
	color:#999;
	font-size:26rpx;
}
.article-wrap .item .info .label-bar text{
	margin:0 10rpx;
}
.typename{
	display: inline-block;
	padding:0 5rpx;
	margin-top: 20rpx;
	border:1rpx solid #f00;
	border-radius: 5rpx;
	color:#f00;
}
.day-time{
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
.click-data{
	display: flex;
	align-items: center;
}
.detail-footer{
	display: flex;
	align-items: center;
	.write-btn{
		display: flex;
		flex-grow: 2; 
		height: 60rpx;
		line-height: 60rpx;
		margin:0 20rpx ;
		padding:0 20rpx;
		background: #f5f5f5;
		border-radius: 36rpx;
		color:#333;
	}
	.btn{
		position: relative; 
		width:90rpx;
		text-align: center;
		line-height: 100rpx;
		color:#999;
		.num{
			position: absolute;
			right:10rpx;
			top:10rpx;
			min-width: 20rpx;
			text-align: center;
			padding:0 5rpx;
			height: 30rpx;
			line-height:30rpx;
			background: #f00;
			border-radius: 36rpx;
			color:#fff;
			font-size: 20rpx;
		}
	} 
} 

.comment-form{
	display: flex;
	align-items: flex-end;
	border-top:1rpx solid #eee;
	padding:20rpx 0;
	background: #fff;
	textarea{
		height: 100rpx;
		margin:0 20rpx;
		padding:10rpx;
		border: 1rpx solid #eee;
		border-radius: 5rpx;
		font-size: 28rpx;
	}
	.btn{
		width: 90rpx;
		text-align: center;
		background: #f00;
		border-radius: 10rpx;
		margin-right: 20rpx;
		padding:2rpx 10rpx;
		color:#fff;
		font-size: 30rpx;
	}
}

/*评论*/
.comment{ 
	.hd{
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		padding:0 20rpx;
		background: #fff;
		border-bottom:1rpx solid #ddd;
		.title{
			font-size:32rpx;
			font-weight: bold;
		}
		.comment-num{
			color:#999;
			font-size:24rpx;
		}
	} 
}
 
.comment-list{
	background: #fff;
	padding:0 16rpx;
	overflow: auto;
	.hf-btn{
		width: 80rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		color:#999;
		font-size: 30rpx;
	}
	.more-btn{
		width: 220rpx;
		margin:20rpx auto;
		text-align: center;
		line-height: 50rpx;
		border:2rpx solid #ddd;
		border-radius: 36rpx;
		font-size: 26rpx;
		color:#333;
	}
	.item{
		overflow: hidden;
		display: flex;
		padding:20rpx 0;
		border-bottom:2rpx dotted #ddd;
		.avator-img{
			width:60rpx;
			border-radius:50%;
			margin-right:20rpx;
			image{
				width:100%;
				border-radius: 15rpx;
			}
		}
		.info{
			width:85%;
			.user-bar{
				display: flex;
				justify-content: space-between;
				margin-bottom:5rpx;
				.user-name{
				  	font-size:28rpx; 
				}
			}
			.day-time{
				margin-bottom:10rpx;
				color:#999;
				font-size:28rpx;
			}
			.content{
				display: flex;
				margin-bottom:20rpx;
				font-size:28rpx;
				color:#666;
				text{
					margin-left: 8rpx;
				}
			}
			.prev-msg{
				align-items: flex-start;
				padding:10rpx;
				border:1rpx dotted #ccc;
				background: #f5f5f5;
				color:#999;
				.label{
					flex-shrink: 0;
				}
			}
			.handle-bar{
				display: flex;
				justify-content: flex-end;
				.zan-btn{
					color:#999;
				}
			}
			.label{
				display: flex;
				align-items: center;
				color:#999;
				.iconfont{
					margin-right:10rpx;
					font-size: 38rpx;
				}
			}
		}
	}
}
.empty-comment{
	margin: 30rpx 0;
	text-align: center;
	font-size: 30rpx;
	color:#999;
}

.share-area{
	position: fixed;
	left:0;
	bottom:0;
	z-index: 100;
	width: 100%; 
	.share-btn-list{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		background: #f5f5f5;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		.item{
			text-align: center;
			margin:0 40rpx;
			.icon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx; 
				margin-bottom: 10rpx; 
				border-radius: 50%;
				image{
					width: 100%;
				}
			}
			text{
				font-size: 24rpx;
			}
		}
		
	}
	.cancle-btn{
		background: #fff;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
	}
}
 
</style>
